<!--
 * @Description: 总部看板-商务数据看板
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2024-03-01 11:08:02
 * @LastEditTime: 2024-03-01 15:42:04
 * @FilePath: \cscec-pms-admin\src\views\businessAffairs\businessCostPlanManagement\headquartersDashboard\index.vue
-->

<template>
  <base-breadcrumb>
  <fullScreen />
    <!-- 通用看版 -->
    <a-card :bordered="false">
      <title-name title="通用看版" />
      <a-row type="flex" justify="space-between">
        <a-col :span="12" v-for="(item, index) in generalList" :key="index">
          <p class="titleClass"><span class="dotClass"></span>{{ item.eBarData.title }}</p>
          <EBar ref="accomplishRatio" :eBarData="item.eBarData" :ready="genera" :id="'generalList' + index" />
        </a-col>
      </a-row>
    </a-card>
    <!-- 土建看版 -->
    <a-card :bordered="false">
      <title-name title="土建看版" />
      <div class="project1">
          <div :class="[isBackColor?'projectColor':'','allProject']" @click="getEngineeringData(2)">全部项目</div>
          <div :class="[!isBackColor?'projectColor':'','allProject']" @click="getEngineeringData(1)">在建项目</div>
        </div>
      <a-row type="flex" justify="space-between">
        <a-col :span="12" v-for="(item, index) in buildingList" :key="index">
          <p class="titleClass"><span class="dotClass"></span>{{ item.eBarData.title }}</p>
          <EBar ref="accomplishRatio" :eBarData="item.eBarData" :ready="building" :id="'buildingList' + index" />
        </a-col>
      </a-row>
    </a-card>
    <!-- 安装看板 -->
    <a-card :bordered="false">
      <title-name title="安装看板" />
      <a-row type="flex" justify="space-between">
        <a-col :span="24" v-for="(item, index) in installList" :key="index">
          <p class="titleClass"><span class="dotClass"></span>{{ item.eBarData.title }}</p>
          <EBar ref="accomplishRatio" :eBarData="item.eBarData" :ready="install" :id="'installList' + index" />
        </a-col>
      </a-row>
    </a-card>
    <!-- 装饰看板 -->
    <a-card :bordered="false">
      <title-name title="装饰看板" />
      <a-row type="flex" justify="space-between">
        <a-col :span="24" v-for="(item, index) in decorateList" :key="index">
          <p class="titleClass"><span class="dotClass"></span>{{ item.eBarData.title }}</p>
          <EBar ref="accomplishRatio" :eBarData="item.eBarData" :ready="decorate" :id="'decorateList' + index" />
        </a-col>
      </a-row>
    </a-card>
  </base-breadcrumb>
</template>

<script>
import EBar from '../components/EBar/EBar.vue';
import fullScreen from '../components/fullScreen/fullScreen.vue'
import { getCommonBulletinBoard, getCivilEngineeringBulletinBoard, getInstallBulletinBoard, getDecorationBulletinBoard } from '@/api/businessAffairs/businessCostPlanManagement.js'

export default {
  name: 'business',

  components: {
    EBar,
    fullScreen
  },
  data() {
    return {
      // 通用看版数据
      isBackColor:true,
      generalList: [
        {
          eBarData: {
            title: '产值确权率',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['产值确权率']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function (params) {
                var value = params[0].value;
                return params[0].name + '<br/>' + params[0].seriesName + ':' + value + '%';
              },
            },
            isObject:true,
            color: ['#4874cb'],
            // dataZoom: {
            //   show: true,
            //   realtime: true,
            //   // type:'slider',
            //   y: 220,
            //   height: 20,
            //   start: 0,
            //   end: 80
            // },
            name: '（%）', //单位
            xAxis: {
              type: 'category',
              triggerEvent: true,
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '产值确权率',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
                // 添加点击事件
                // onclick:  (params)=> {
                //   console.log(123);
                //   this.lineClick(params)
                // }
              },
            ]
          }
        },
        {
          eBarData: {
            title: '工程计量确认率',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['工程计量确认率']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function (params) {
                var value = params[0].value;
                return params[0].name + '<br/>' + params[0].seriesName + ':' + value + '%';
              },
            },
            color: ['#4874cb'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              triggerEvent: true,
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '工程计量确认率',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
                // barWidth: '10%'
              },
            ]
          }
        },
        {
          eBarData: {
            title: '直接费与间接费比例',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['直接费', '间接费']
            },
            color: ['#4874cb', '#73deb4'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              triggerEvent: true,
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '直接费',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                
                // barWidth: '10%'
              },
              {
                name: '间接费',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                // barWidth: '10%'
              },
            ]
          }
        },
        {
          eBarData: {
            title: '管理费占比',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['管理费占比']
            },
            color: ['#81d3f8'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              triggerEvent: true,
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '管理费占比',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
              },
            ]
          }
        },
        {
          eBarData: {
            title: '安全文明施工费占比',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['安全文明施工费占比']
            },
            color: ['#ee823a'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              triggerEvent: true,
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '安全文明施工费占比',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
              },
            ]
          }
        },
        {
          eBarData: {
            title: '临建占比',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['临建占比']
            },
            color: ['#73deb4'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              triggerEvent: true,
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '临建占比',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
              },
            ]
          }
        },
        {
          eBarData: {
            title: '变洽签占比',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['变洽签占比']
            },
            color: ['#4874cb'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              triggerEvent: true,
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '变洽签占比',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
              },
            ]
          }
        },
      ],
      genera: false,
      // 土建看版数据
      buildingList: [
        {
          eBarData: {
            title: 'CI平米成本',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['CI平米成本']
            },
            color: ['#4874cb'],
            // dataZoom: {
            //   show: true,
            //   realtime: true,
            //   // type:'slider',
            //   y: 220,
            //   height: 20,
            //   start: 0,
            //   end: 80
            // },
            name: '（元）', //单位
            xAxis: {
              type: 'category',
              triggerEvent: true,
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: 'CI平米成本',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
              },
            ]
          }
        },
        {
          eBarData: {
            title: '物业平米成本',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['物业平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              triggerEvent: true,
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '物业平米成本',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
                // barWidth: '10%'
              },
            ]
          }
        },
        {
          eBarData: {
            title: '标准化平米成本',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['标准化平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              triggerEvent: true,
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '标准化平米成本',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
                // barWidth: '10%'
              },
            ]
          }
        },
        {
          eBarData: {
            title: '脚手架平米成本',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['脚手架平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              triggerEvent: true,
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '脚手架平米成本',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
              },
            ]
          }
        },
        {
          eBarData: {
            title: '模板平米成本',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['模板平米成本(材料)','模板平米成本(人工)']
            },
            color: ['#4874cb', '#73deb4'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              triggerEvent: true,
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '模板平米成本(材料)',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                
              },
              {
                name: '模板平米成本(人工)',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                // barWidth: '10%'
              },
            ]
          }
        },
        // {
        //   eBarData: {
        //     title: '模板平米成本(人工)',
        //     legend: {
        //       // left: '14%',
        //       // top: '6%',
        //       data: ['模板平米成本(人工)']
        //     },
        //     color: ['#4874cb'],
        //     name: '(元)', //单位
        //     xAxis: {
        //       type: 'category',
        //       data: [],
        //       axisLabel: {
        //         color: '#666',
        //         interval: 0,
        //         rotate: 30
        //       },
        //     },
        //     // nameList:
        //     data: [
        //       {
        //         name: '模板平米成本(人工)',
        //         data: [],
        //         type: 'bar',
        //         label: {
        //           show: true,
        //           position: 'top',
        //         },
        //         // barWidth: '10%'
        //       },
        //     ]
        //   }
        // },
      ],
      building: false,
      // 安装看板数据
      installList: [
        {
          eBarData: {
            title: '给排水工程平米成本',
            legend: {
              // left: '7%',
              // top: '6%',
              data: ['给排水工程平米成本']
            },
            color: ['#4874cb'],
            // dataZoom: {
            //   show: true,
            //   realtime: true,
            //   // type:'slider',
            //   y: 220,
            //   height: 20,
            //   start: 0,
            //   end: 80
            // },
            name: '（元）', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '给排水工程平米成本',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
              },
            ]
          }
        },
        {
          eBarData: {
            title: '电气工程平米成本',
            legend: {
              // left: '7%',
              // top: '6%',
              data: ['电气工程平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '电气工程平米成本',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
                // barWidth: '10%'
              },
            ]
          }
        },
        {
          eBarData: {
            title: '暖通工程平米成本',
            legend: {
              // left: '7%',
              // top: '6%',
              data: ['暖通工程平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '暖通工程平米成本',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
                // barWidth: '10%'
              },
            ]
          }
        },
        {
          eBarData: {
            title: '各类实际成本占比',
            legend: {
              // left: '7%',
              // top: '6%',
              data: ['给排水工程实际成本占比', '电气工程实际成本占比', '暖通工程实际成本占比']
            },
            color: ['#74a0fa', '#73deb4', '#81d3f8'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '给排水工程实际成本占比',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                // barWidth: '10%'
              },
              {
                name: '电气工程实际成本占比',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                // barWidth: '10%'
              },
              {
                name: '暖通工程实际成本占比',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                // barWidth: '10%'
              },
            ]
          }
        },

      ],
      install: false,
      //装饰看板数据
      decorateList: [
        {
          eBarData: {
            title: '装饰看版',
            legend: {
              // left: '7%',
              // top: '6%',
              data: ['精装平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '精装平米成本',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
              },
            ]
          }
        },
        {
          eBarData: {
            title: '外装平米成本',
            legend: {
              // left: '7%',
              // top: '6%',
              data: ['外装平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              },
            },
            // nameList:
            data: [
              {
                name: '外装平米成本',
                data: [],
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                },
              },
            ]
          }
        },
      ],
      decorate: false,
      outputValueConfirmationRate:[]
    }
  },
  created() {
    this.getGeneralData()
    this.getEngineeringData()
    this.getInstallData()
    this.getDecorationData()
  },
  methods: {
    lineClick(params){
      this.$router.push({
        path:'/businessAffairs/businessCostPlanManagement/branchDashboard/business',
        query:{
          id:params?.data?.id || params.id
        }
      })
    },
    async getGeneralData() {
      this.genera = false
      const { data } = await getCommonBulletinBoard()
      this.outputValueConfirmationRate = data.outputValueConfirmationRate
      data.outputValueConfirmationRate.forEach(item => {
        this.generalList[0].eBarData.xAxis.data.push(item.name)
        this.generalList[0].eBarData.data[0].data.push({value:item.rate == 0.00 ?0 :item.rate ,id:item.id,name:item.name})
      })
      data.meteringConfirmationRate.forEach(item => {
        this.generalList[1].eBarData.xAxis.data.push(item.name)
        this.generalList[1].eBarData.data[0].data.push({value:item.rate == 0.00 ?0 :item.rate,id:item.id,name:item.name})
      })
      let directFee = []
      let indirectFee = []
      data.directAndIndirectRate.forEach(item => {
        this.generalList[2].eBarData.xAxis.data.push(item.name)
        this.generalList[2].eBarData.data[0].data.push({value:item.directRate == 0.00 ?0 :item.directRate,id:item.id,name:item.name})
        this.generalList[2].eBarData.data[1].data.push(item.indirectRate == 0.00 ?0 :item.indirectRate)
        directFee.push(item.directFee)
        indirectFee.push(item.indirectFee)
      })
      this.generalList[2].eBarData.tooltip = {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          let value = params[0]?.value;
          let value2 = params[1]?.value;
          let add1 = value||value == 0?( params[0].seriesName + '比例:' + value + '%' + '  ' + '  ' + +directFee[params[0].dataIndex] + '万元') :''
          let add2 =  value2||value2 == 0?( params[1].seriesName + '比例:' + value2 + '%' + '  ' + '  ' + +indirectFee[params[0].dataIndex] + '万元') :''
          return params[0].name + '<br/>' + add1 + '<br/>' + add2;
        },
      }
      let feeArr = []
      data.manageFeeRate.forEach(item => {
        this.generalList[3].eBarData.xAxis.data.push(item.name)
        this.generalList[3].eBarData.data[0].data.push({value:item.rate == 0.00 ?0 :item.rate,id:item.id,name:item.name})
        feeArr.push(item.fee)
      })
      this.generalList[3].eBarData.tooltip = {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          let value = params[0].value;
          let seriesName = params[0].seriesName;
          let fee = feeArr[params[0].dataIndex]
          let name = params[0].name
          return name + '<br/>' + seriesName + '：' + value + '%' + '  ' + '  ' + fee + '万元';
        },
      }
      let feeData = []
      data.civilizedConstructionFeeRate.forEach(item => {
        this.generalList[4].eBarData.xAxis.data.push(item.name)
        this.generalList[4].eBarData.data[0].data.push({value:item.rate == 0.00 ?0 :item.rate,id:item.id,name:item.name})
        feeData.push(item.fee)
      })
      this.generalList[4].eBarData.tooltip = {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          let value = params[0].value;
          let seriesName = params[0].seriesName;
          let fee = feeData[params[0].dataIndex]
          let name = params[0].name
          return name + '<br/>' + seriesName + '：' + value + '%' + '  ' + '  ' + fee + '万元';
        },
      }
      let feeData1 = []
      data.temporarilyFeeRate.forEach(item => {
        this.generalList[5].eBarData.xAxis.data.push(item.name)
        this.generalList[5].eBarData.data[0].data.push({value:item.rate == 0.00 ?0 :item.rate,id:item.id,name:item.name})
        feeData1.push(item.fee)
      })
      this.generalList[5].eBarData.tooltip = {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          let value = params[0].value;
          let seriesName = params[0].seriesName;
          let fee = feeData1[params[0].dataIndex]
          let name = params[0].name
          return name + '<br/>' + seriesName + '：' + value + '%' + '  ' + '  ' + fee + '万元';
        },
      }
      let feeData2 = []
      data.alterDiscussVisaFeeRate.forEach(item => {
        this.generalList[6].eBarData.xAxis.data.push(item.name)
        this.generalList[6].eBarData.data[0].data.push({item:item.rate == 0.00 ?0 :item.rate,id:item.id,name:item.name})
        feeData2.push(item.fee)
      })
      this.generalList[6].eBarData.tooltip = {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          let value = params[0].value;
          let seriesName = params[0].seriesName;
          let fee = feeData2[params[0].dataIndex]
          let name = params[0].name
          return name + '<br/>' + seriesName + '：' + value + '%' + '  ' + '  ' + fee + '万元';
        },
      }
      this.genera = true
      this.generalList.forEach((item,index)=>{
        item.eBarData.onClick = (param)=>{
          let chartData = item.eBarData.data[0].data,
          findObj = chartData.find((item)=>item.name===param.value) || {},
                  newParam = {}
                  //点击x轴
                  if(param.componentType == 'xAxis'){
                    newParam = findObj || {};
                  }else{
                    newParam = param
                  }
                    this.lineClick(newParam)
             }
        
      })
    },
    async getEngineeringData(type = 2) {
      this.isBackColor = type == 1 ? false : true 
      this.building = false
      const { data } = await getCivilEngineeringBulletinBoard()
      data.ciSquareMetreCost.forEach(item => {
        this.buildingList[0].eBarData.xAxis.data.push(item.name)
        this.buildingList[0].eBarData.data[0].data.push({value:item.cost == 0.00 ?0 :item.cost,id:item.id,name:item.name})
      })
      data.propertySquareMetreCost.forEach(item => {
        this.buildingList[1].eBarData.xAxis.data.push(item.name)
        this.buildingList[1].eBarData.data[0].data.push({value:item.cost == 0.00 ?0 :item.cost,id:item.id,name:item.name})
      })
      data.standardSquareMetreCost.forEach(item => {
        this.buildingList[2].eBarData.xAxis.data.push(item.name)
        this.buildingList[2].eBarData.data[0].data.push({value:item.cost == 0.00 ?0 :item.cost,id:item.id,name:item.name})
      })
      data.scaffoldSquareMetreCost.forEach(item => {
        this.buildingList[3].eBarData.xAxis.data.push(item.name)
        this.buildingList[3].eBarData.data[0].data.push({value:item.cost == 0.00 ?0 :item.cost,id:item.id,name:item.name})
      })
      data.materialSquareMetreCost.forEach(item => {
        this.buildingList[4].eBarData.xAxis.data.push(item.name)
        this.buildingList[4].eBarData.data[0].data.push({value:item.cost == 0.00 ?0 :item.cost,id:item.id,name:item.name})
      })
      data.artificialSquareMetreCost.forEach(item => {
        this.buildingList[4].eBarData.data[1].data.push({value:item.cost == 0.00 ?0 :item.cost,id:item.id,name:item.name})
      })
      this.buildingList[4].eBarData.tooltip = {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          let value = params[0]?.value;
          let value2 = params[1]?.value;
          let add1 = value||value == 0?( params[0].seriesName + ':' + value + '元') :''
          let add2 =  value2||value2 == 0?( params[1].seriesName + ':' + value2 + '元') :''
          return params[0].name + '<br/>' + add1 + '<br/>' + add2;
        },
      }
      // data.artificialSquareMetreCost.forEach(item => {
      //   this.buildingList[5].eBarData.xAxis.data.push(item.name)
      //   this.buildingList[5].eBarData.data[0].data.push(item.cost == 0.00 ?0 :item.cost)
      // })
      this.building = true
      this.buildingList.forEach((item,index)=>{
        item.eBarData.onClick = (param)=>{
          let chartData = item.eBarData.data[0].data,
          findObj = chartData.find((item)=>item.name===param.value) || {},
                  newParam = {}
                  //点击x轴
                  if(param.componentType == 'xAxis'){
                    newParam = findObj || {};
                  }else{
                    newParam = param
                  }
                    this.lineClick(newParam)
             }
        
      })
    },
    async getInstallData() {
      this.install = false
      const { data } = await getInstallBulletinBoard()
      data.drainageSquareMetreCost.forEach(item => {
        this.installList[0].eBarData.xAxis.data.push(item.name)
        this.installList[0].eBarData.data[0].data.push(item.cost == 0.00 ?0 :item.cost)
      })
      data.electricalSquareMetreCost.forEach(item => {
        this.installList[1].eBarData.xAxis.data.push(item.name)
        this.installList[1].eBarData.data[0].data.push(item.cost == 0.00 ?0 :item.cost)
      })
      data.havcSquareMetreCost.forEach(item => {
        this.installList[2].eBarData.xAxis.data.push(item.name)
        this.installList[2].eBarData.data[0].data.push(item.cost == 0.00 ?0 :item.cost)
      })
      let drainageCostArr = []
      let electricalCostArr = []
      let havcCostArr = []
      data.variousTypeSquareMetreCostRate.forEach(item => {
        this.installList[3].eBarData.xAxis.data.push(item.name)
        this.installList[3].eBarData.data[0].data.push(item.drainageRate == 0.00 ?0 :item.drainageRate)
        this.installList[3].eBarData.data[1].data.push(item.electricalRate == 0.00 ?0 :item.electricalRate)
        this.installList[3].eBarData.data[2].data.push(item.havcRate == 0.00 ?0 :item.havcRate)
        drainageCostArr.push(item.drainageCost)
        electricalCostArr.push(item.electricalCost)
        havcCostArr.push(item.havcCost)
      })
      this.installList[3].eBarData.tooltip = {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          let value = params[0]?.value;
          let value1 = params[1]?.value;
          let value2 = params[2]?.value;
          let add1 = value||value == 0?( params[0].seriesName + ':       ' + value + '%   ' + '  ' + '  ' + +drainageCostArr[params[0].dataIndex] + '万元') :''
          let add2 =  value1||value1 == 0?(params[1].seriesName + ':   ' + value1 + '%   ' + '  ' + '  ' + +electricalCostArr[params[0].dataIndex] + '万元' ) :''
          let add3 =  value2||value2 == 0?( params[2].seriesName + ':   ' + value2 + '%   ' + '  ' + '  ' + +havcCostArr[params[0].dataIndex] + '万元') :''
          return params[0].name + '<br/>' + add1 + '<br/>' + add2  + '<br/>' + add3;
        },
      }
      this.install = true
    },
    async getDecorationData() {
      this.decorate = false
      const { data } = await getDecorationBulletinBoard()
      data.hardcoverSquareMetreCost.forEach(item => {
        this.decorateList[0].eBarData.xAxis.data.push(item.name)
        this.decorateList[0].eBarData.data[0].data.push(item.cost == 0.00 ?0 :item.cost)
      })
      data.exteriorSquareMetreCost.forEach(item => {
        this.decorateList[1].eBarData.xAxis.data.push(item.name)
        this.decorateList[1].eBarData.data[0].data.push(item.cost == 0.00 ?0 :item.cost)
      })
      this.decorate = true
    },
  }
}
</script>

<style lang="less" scoped>
.totalBox {
  padding-left: 20px;
}
.project1{
  position: absolute;
    top: 10px;
    right: 1%;
    display: flex;
    justify-content: space-evenly;
    width: 140px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #02a7f0;
    border-radius: 8px;
    .allProject{
      cursor: pointer;
      flex: 1;
      text-align: center;
    }
    .projectColor{
      background-color: #02a7f0;
      color: #fff;
    }
}
.total {
  padding-left: 10px;
  height: 65px;
  line-height: 65px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 1);
  border-radius: 6px;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  color: #666;
  -webkit-box-shadow: 0px 0px 10px rgba(242, 242, 242, 1);
  box-shadow: 0px 0px 10px rgba(242, 242, 242, 1);
}

.titleClass {
  margin: 0;
  padding-left: 25px; // 50

  .dotClass {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #4874cb;
    border-radius: 50%;
    background-color: #4874cb;
    margin-right: 10px;
  }
}
</style>